<template>
    <div class="user-profile-card" v-loading="loading">
        <div v-if="cardInfo" class="card-container">
            <div class="card-backdrop" :style="{ backgroundImage: `url(${cardInfo.avatar})` }"></div>
            <div class="card-content">
                <div class="card-header">
                    <el-avatar :size="80" :src="cardInfo.avatar" class="avatar"></el-avatar>
                    <h3 class="nickname">{{ cardInfo.nickname }}</h3>
                    <p class="signature">{{ cardInfo.intro || '这个人很神秘，什么都没有留下...' }}</p>
                </div>

                <div class="stats-container">
                    <div class="stat-item">
                        <div class="stat-value">{{ cardInfo.articleCount }}</div>
                        <div class="stat-label">文章</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ cardInfo.totalViews }}</div>
                        <div class="stat-label">阅读</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">{{ cardInfo.totalLikes }}</div>
                        <div class="stat-label">获赞</div>
                    </div>
                </div>

                <div class="card-footer">
                    <el-button type="primary" round @click="goToUserProfile">
                        <i class="fas fa-arrow-right"></i>
                        <span>访问主页</span>
                    </el-button>
                </div>
            </div>
        </div>
        <div v-else-if="!loading" class="error-message">
            <i class="fas fa-exclamation-circle"></i>
            <p>获取用户信息失败</p>
        </div>
    </div>
</template>

<script>
import { getProfileCard } from '@/api/profile';

export default {
    name: 'UserProfileCard',
    props: {
        userId: {
            type: [Number, String],
            required: true
        }
    },
    data() {
        return {
            loading: false,
            cardInfo: null
        }
    },
    created() {
        this.fetchCardData();
    },
    methods: {
        async fetchCardData() {
            if (!this.userId) return;
            this.loading = true;
            try {
                const res = await getProfileCard(this.userId);
                this.cardInfo = res.data;
            } catch (error) {
                console.error('Failed to fetch profile card:', error);
            } finally {
                this.loading = false;
            }
        },
        goToUserProfile() {
            this.$emit('close-popover');
            this.$router.push(`/user/${this.userId}`);
        }
    }
}
</script>

<style lang="scss" scoped>
@use 'sass:map';
@use '@/styles/variables.scss' as *;

.user-profile-card {
    position: relative;
    border-radius: 15px;
    overflow: visible;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: $shadow-lg;
}

.card-container {
    width: 100%;
    position: relative;
}

.card-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.8);
    z-index: 1;
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

.card-content {
    position: relative;
    z-index: 2;
    padding: 50px 20px 20px;
    text-align: center;
    color: $text-secondary;
}

.card-header {
    margin-top: -90px;

    .avatar {
        width: 88px;
        height: 88px;
        border: 4px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        &:hover {
            transform: scale(1.15) rotate(8deg);
        }
    }

    .nickname {
        font-size: 1.5em;
        font-weight: bold;
        margin: 15px 0 5px;
        color: $text-primary;
    }

    .signature {
        font-size: 0.9em;
        color: $text-secondary;
        min-height: 2.5em;
        line-height: 1.4;
    }
}

.stats-container {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    margin: 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.stat-item {
    .stat-value {
        font-size: 1.4em;
        font-weight: 600;
        color: $primary;
    }

    .stat-label {
        font-size: 0.8em;
        color: $text-secondary;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
}

.card-footer {
    .el-button {
        transition: all 0.3s ease;
        background: linear-gradient(45deg, $primary, $secondary);
        border: none;

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        i {
            margin-right: 5px;
        }
    }
}

.error-message {
    text-align: center;
    color: #e74c3c;
    font-size: 1.1em;

    i {
        font-size: 2em;
        margin-bottom: 10px;
    }
}

@media (prefers-color-scheme: dark) {
    .user-profile-card {
        background: rgba(map.get($dark, card-bg), 0.7);
        border-color: rgba(255, 255, 255, 0.1);
        color: map.get($dark, text-secondary);
    }

    .card-content {
        color: map.get($dark, text-secondary);
    }

    .card-header {
        .avatar {
            border-color: rgba(map.get($dark, surface), 0.5);
        }

        .nickname {
            color: map.get($dark, text-primary);
        }

        .signature {
            color: map.get($dark, text-secondary);
        }
    }

    .stats-container {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .stat-item {
        .stat-value {
            color: $secondary;
        }

        .stat-label {
            color: map.get($dark, text-secondary);
        }
    }

    .card-footer .el-button {
        background: linear-gradient(45deg, $primary, $secondary);
    }
}
</style>